import React from "react";
import { useTimer } from "react-timer-hook";

export function MyTimer({ expiryTimestamp, onExpire }: any) {
  const { seconds, minutes } = useTimer({
    expiryTimestamp,
    onExpire: () => onExpire(),
  });

  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "35px" }} className="text-primary">
        <span>{minutes}</span>:<span>{seconds} s</span>
      </div>
    </div>
  );
}

export function SecondTimer({ expiryTimestamp, onExpire }: any) {
  const { seconds } = useTimer({
    expiryTimestamp,
    onExpire: () => onExpire(),
  });

  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "35px" }} className="text-primary">
        <span>{seconds} s</span>
      </div>
    </div>
  );
}